<!DOCTYPE html>
<html>
	<head>
		<title>砖家宝内部网址管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		
		<link rel="shortcut icon" href="view/pc/images/favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="css/common/pcCommon.css" type="text/css" media="screen"/>
		
		<style type="text/css">
			.top {
				border-bottom: 1px solid #eee;
			}
			
			.top>.btn {
				float: right;
			    background-color: cornflowerblue;
			    width: 100px;
			    text-align: center;
			    height: 30px;
			    line-height: 30px;
			    color: white;
			    font-size: 16px;
			    font-weight: 600;
			    cursor: pointer;
			}
			
			.middle {
				text-align: -webkit-center;
				margin-top: 80px;
			}
			
			.middle>.search {
			    width: 50%;
			    min-width: 530px;
			    border: 1px solid #eee;
			    height: 68px;
			    background-color: #ccc9c9;
			    line-height: 68px;
			}
			
			.middle>.search>.classifies {
			    float: left;
			    height: 35px;
			    margin: 16px;
			    border: none;
			    font-size: 16px;
			    width: 90px;
			    color: gray;
			    border-radius: 2px;
			}
			
			.middle>.search>.searchIpt {
				float: right;
				height: 35px;
			    margin: 16px;
			    border: none;
			    font-size: 16px;
			    width: 200px;
			    color: gray;
			    border-radius: 2px;
			}
			
			.middle>.search>.searchBtn {
				float: right;
			    background-color: cornflowerblue;
			    height: 35px;
			    line-height: 35px;
			    margin: 16px;
			    width: 60px;
			    border-radius: 2px;
			    color: white;
			    font-size: 16px;
			    cursor: pointer;
			}

			.middle>.search>.addBtn {
				float: right;
			    background-color: cornflowerblue;
			    height: 35px;
			    line-height: 35px;
			    margin: 16px 10px;
			    width: 60px;
			    border-radius: 2px;
			    color: white;
			    font-size: 16px;
			    cursor: pointer;
			}
			
			.middle>.searchRuslts {
				width: 50%;
			    min-width: 630px;
			    min-height: 400px;
			    border: 1px solid #eee;
			    background-color: white;
			    margin-top: 20px;
			    border-radius: 2px;
			    margin-bottom: 50px;
			}
			
			.middle>.searchRuslts>.oneRuslts {
			    padding: 5px 5px;
			    height: 35px;
			    line-height: 35px;
			    border-radius: 2px;
			    border-bottom: 1px solid #f3efef;
			    font-size: 13px;
			}
			
			.middle>.searchRuslts>.oneRuslts>.websiteName {
				float: left;
			    color: steelblue;
			    width: 120px;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			
			.middle>.searchRuslts>.oneRuslts>.websiteUrl {
				float: left;
			    font-size: 12px;
			    width: 250px;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    margin-left: 5px;
			}
			
			.middle>.searchRuslts>.oneRuslts>.discription {
				float: left;
				margin-left: 5px;
			    font-size: 12px;
			    width: 145px;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			
			.middle>.searchRuslts>.oneRuslts>.classify {
				float: left;
				max-width: 25px;
				white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			
			.middle>.searchRuslts>.oneRuslts>.modify {
				float: right;
				color: cornflowerblue;
			    margin-right: 10px;
			    cursor: pointer;
			}
			
			.middle>.searchRuslts>.oneRuslts>.delete {
				float: right;
				color: currentColor;
				margin-right: 5px;
				cursor: pointer;
			}
		
			.maskBody {
			    position: fixed;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    padding-top: 50px;
			
			}
			
			.maskBody>.mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,0.8); 
			
			}
	
			.maskBody>.editWebsite {
			    position: fixed;
			    left: calc(50% - 225px);
			    top: calc(50% - 200px);
			    width: 450px;
			    min-height: 400px;
			    background-color: white;
			    border-radius: 5px;
			}
			
			.maskBody>.editWebsite>.topTitle {
			    position: relative;
			    height: 68px;
			    border-bottom: 1px solid #eee;
			    background-color: #f3f3e7;
			    border-top-left-radius: 5px;
			    border-top-right-radius: 5px;	
			}
			
			.maskBody>.editWebsite>.topTitle>.title {
				font-size: 17px;
				height: 68px;
				line-height: 68px;
				color: #222;
				text-align: center;
			}

			.maskBody>.editWebsite>.topTitle>.fork {
				background-image: url(view/pc/images/fork.png);
			    background-repeat: no-repeat;
				width: 14px;
				height: 14px;
				top: 22px;
				right: 23px;
				position: absolute;		
				cursor: pointer;
			}
			
			.maskBody>.editWebsite>.info {
				text-align: center;
			}
			
			.maskBody>.editWebsite>.info>.ipt {
				width: 304px;
				height: 45px;
			    margin-top: 15px;
			    font-size: 14px;
			    color: gray;
			    padding: 0 10px;
			}
			
			.maskBody>.editWebsite>.info>.wesiteName {
			
			}
			
			.maskBody>.editWebsite>.info>.wesiteUrl {
			
			}
			
			.maskBody>.editWebsite>.info>.wesiteDiscription {
			
			}
			
			.maskBody>.editWebsite>.info>.classifies {
				width: 324px;
				margin: 15px auto;
			    font-size: 14px;
			    color: #d0d0d0;
			    height: 45px;
			}
			
			.maskBody>.editWebsite>.info>.classifies>.classify {
				width: 120px;
				float: left;
				color: gray;
				height: 45px;
				margin-left: -1px;
			}
			
			.maskBody>.editWebsite>.info>.classifies>.editClassifyBtn {
				width: 100px;
				float: right;
				text-align: center;
				line-height: 45px;
				font-size: 14px;
				color: blue;
				cursor: pointer;
			}
			
			.maskBody>.editWebsite>.infoTitle {
				padding: 5px 10px 5px 20px;
				background-color: aliceblue;
			}
		
			.maskBody>.editWebsite>.infoTitle>.keyTitle {
				width: 54px;
				height: 30px;
				float: left;
			}
			
			.maskBody>.editWebsite>.infoTitle>.classifyNameTitle {
				width: 154px;
				margin-left: 10px;
				height: 30px;
				float: left;
				text-align: center;
			}
			
			.maskBody>.editWebsite>.infoTitle>.operation {
				color: olive;
				text-align: center;
			}
			
			.maskBody>.editWebsite>.infos {
				
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo {
				padding: 5px 10px 5px 20px;
				border-bottom: 1px solid #eee;
			}
		
			.maskBody>.editWebsite>.infos>.oneInfo>.key {
				width: 50px;
				height: 30px;
				float: left;
				background-color: white;
				border: none;
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo>.classifyName {
				width: 150px;
				margin-left: 10px;
				height: 30px;
				float: left;
				background-color: white;
				border: none;
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo>.btn {
				float: right;
				font-size: 14px;
				width: 30px;
				margin-left: 8px;
				cursor: pointer;
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo>.delete {
				color: olive;
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo>.edit {
				color: blue;
			}
			
			.maskBody>.editWebsite>.infos>.oneInfo>.save {
				color: blue;
			}
			
			.maskBody>.editWebsite>.ok {
				text-align: center;
			    margin: 30px auto;
			    width: 117px;
				height: 35px;
				font-size: 12px;
				color: white;
				background-color: #14a4ff;
				line-height: 35px;
				border-radius: 3px;
				cursor: pointer;
			}
			
			.maskBody>.editWebsite>.addClassify {
				text-align: center;
			    margin: 30px auto;
			    width: 117px;
				height: 35px;
				font-size: 12px;
				color: white;
				background-color: #14a4ff;
				line-height: 35px;
				border-radius: 3px;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		<div class="top">
			<div class="btn" id="index">主页</div>
			<div class="clear"></div>
		</div>
		<div class="middle">
			<div class="search">
				<select class="classifies" id="searchChoiceClassify">
					<option selected="selected" value=" ">网站类型</option>
				</select>
				<div class="addBtn" id="addWebsite">新增</div>
				<div class="searchBtn" id="searchBtn">搜索</div>
				<input class="searchIpt" id="searchIpt"/>
				<div class="clear"></div>
			</div>
			<div class="searchRuslts" id="searchRuslts"></div>
		</div>
		<div class="maskBody hidden" id="editWebsite">
			<div class="mask"></div>
			<div class="editWebsite">
				<div class="topTitle">
					<div class="title">编辑信息</div>
					<div class="fork" id="addWebsiteFork"></div>
					<div class="clear"></div>
				</div>
				<div class="info" id="urlId">
					<input class="ipt wesiteName" id="websiteName" placeholder="网站名称"/>
					<input class="ipt wesiteUrl" id="websiteUrl" placeholder="网址"/>
					<input class="ipt wesiteDiscription" id="websiteDiscription" placeholder="网站介绍"/>
					<div class="classifies">
						<select class="classify" id="ChoiceClassify"></select>
						<div class="editClassifyBtn" id="editClassifyBtn">编辑分类</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="ok" id="save">确定</div>
			</div>
		</div>
		<div class="maskBody hidden" id="editClassify">
			<div class="mask"></div>
			<div class="editWebsite">
				<div class="topTitle">
					<div class="title">编辑信息</div>
					<div class="fork" id="editClassifyFork"></div>
					<div class="clear"></div>
				</div>
				<div class="infoTitle">
					<div class="keyTitle">分类key</div>
					<div class="classifyNameTitle">分类名</div>
					<div class="operation">操作</div>
					<div class="clear"></div>
				</div>
				<div class="infos" id="infos">
					<div class="oneInfo">
						<input class="key" disabled="disabled"/>
						<input class="classifyName" disabled="disabled"/>
						<div class="btn delete" id="delClassify">删除</div>
						<div class="btn edit" id="editClassify">编辑</div>
						<div class="btn save" id="saveClassify">保存</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="addClassify" id="addClassifyRow">新增</div>
			</div>
		</div>
		<script type="text/javascript">
		$(function() {
			loadClassifyDataForOption('#searchChoiceClassify');
			loadWebsiteData(); 
			clickEvent();
			search();
			
			function loadClassifyDataForOption(containers) {
				var container = $(containers);
				$.post('pc0001/loadClassifyData', function(result) {
					showOption(result, container);
					}, 'json');
			}			
			function loadWebsiteData(){
				$.post('pc0001/loadWebsiteData', showWebsiteView, 'json');
			}
			
			
			function loadClassifyData() {
				$.post('pc0001/loadClassifyData', showClassifyView, 'json');
			}
			
			function showWebsiteView(result) {
				
				function genView(row) {
					var html = [];
					
					html.push('	<div class="oneRuslts" tagId="'+(row.id || '')+'">');
					html.push('		<div class="websiteName">'+(row.urlName || '空')+'</div>');
					html.push('		<div class="websiteUrl">'+(row.url || '空')+'</div>');
					html.push('		<div class="discription">'+(row.introduce || '暂无')+'</div>');
					html.push('		<div class="classify">'+(row.classifyId || '空')+'</div>');
					html.push('		<div class="delete" id="delete">删除</div>');
					html.push('		<div class="modify" id="edit">修改</div>');
					html.push('		<div class="clear"></div>');
					html.push('	</div>');
					
					var div = $(html.join('\r\n'));
					
					div.find('#delete').click(function() { deleteWebsite(row.id) });
					div.find('#edit').click(function() { editWebsite(row) });
					
					return div;
				}
				
				var container = $('#searchRuslts');
				container.empty();
				
				for(var i=0; i<result.length; i++) {
					var pDiv = genView(result[i]);
					container.append(pDiv);
				}
				
				var clearDiv = $('<div class="clear"></div>');
				container.append(clearDiv);					
			}
			
			function showClassifyView(result) {
				
				function genView(row) {
					var html = [];
					
					html.push('	<div class="oneInfo" id="oneInfo'+ row.id +'" tagId="'+ row.id +'">');
					html.push('		<input class="key" id="classifyId" value="'+(row.id)+'" disabled="disabled"/>');
					html.push('		<input class="classifyName" id="classifyName" value="'+(row.classifyName)+'" disabled="disabled"/>');
					html.push('		<div class="btn delete" id="delClassify">删除</div>');
					html.push('		<div class="btn edit" id="editOneClassify">编辑</div>');
					html.push('		<div class="btn save hidden" id="saveClassify">保存</div>');
					html.push('		<div class="clear"></div>');
					html.push('	</div>');
					
					var div = $(html.join('\r\n'));
					
					div.find('#delClassify').click(function() { delClassify(row.id) });
					div.find('#editOneClassify').click(function() { editClassify(row.id); });
					div.find('#saveClassify').click(function() { saveClassify(row.id) });
					
					return div;
				}
				
				var container = $('#infos');
				container.empty();
				
				for(var i=0; i<result.length; i++) {
					var pDiv = genView(result[i]);
					container.append(pDiv);					
				}
				
				var clearDiv = $('<div class="clear"></div>');
				container.append(clearDiv);	
			}
			
			function editClassify(id) {
				$('#oneInfo'+id+'>#saveClassify').removeClass('hidden');
				$('#oneInfo'+id+'>#editOneClassify').addClass('hidden');
				$('#oneInfo'+id+'>#classifyName').removeAttr('disabled');
			}
			
			function addClassifyRow() {
				
				$('#addClassifyRow').addClass('hidden');
				
				function genView() {
					var html = [];
					
					html.push('	<div class="oneInfo" id="addOneInfo">');
					html.push('		<input class="key" id="classifyId" placeholder="id不填" disabled="disabled"/>');
					html.push('		<input class="classifyName" id="addClassifyName"/>');
					html.push('		<div class="btn delete" id="delAddClassifyRow">删除</div>');
					html.push('		<div class="btn save" id="saveClassify">保存</div>');
					html.push('		<div class="clear"></div>');
					html.push('	</div>');
					
					var div = $(html.join('\r\n'));
					
					div.find('#delAddClassifyRow').click(function() {
						$('#addOneInfo').remove();
						$('#addClassifyRow').removeClass('hidden');
					});
					
					div.find('#saveClassify').click(function() { saveClassify(0); });
					
					return div;
				}
				
				var container = $('#infos');
				var pDiv = genView();
				container.append(pDiv);
				var clearDiv = $('<div class="clear"></div>');
				container.append(clearDiv);					
			}
			
			function saveClassify(id) {
				$('#addClassifyRow').removeClass('hidden');
				var classifyName = $('#oneInfo'+id+'>#classifyName').val();
				var addClassifyName = $('#addClassifyName').val();
				
				if(id) {
					$.post('pc0001/editclassify', {
						id: id,
						classifyName: classifyName
					}, loadClassifyData, 'json');
				}else {
					$.post('pc0001/addClassify', {
						classifyName: addClassifyName
					}, loadClassifyData, 'json');
				}
			}
			
			function delClassify(id) {
				$.post('pc0001/delClassify', {
					id: id
				}, loadClassifyData, 'json');
			}
			
			function clickEvent() {
				$('#index').click(function() { window.location = 'pc0000'; });
				$('#addWebsite').click(function() { addWebsite(); });
				$('#save').click(function() { saveWebsite(); } );
				$('#editClassifyBtn').click(function() {
					$('#editClassify').removeClass('hidden');
					loadClassifyData();	
					});
				$('#addWebsiteFork').click(function() { $('#editWebsite').addClass('hidden');} );
				$('#editClassifyFork').click(function() { 
					$('#editClassify').addClass('hidden');
					loadClassifyDataForOption($('#ChoiceClassify'));
				} );
				$('#addClassifyRow').click(function() { addClassifyRow(); });
			}
			
			function search() {
				$('#searchBtn').click(function() {  
					$.post('pc0001/search', {
						websiteKey: $('#searchIpt').val(),
						classifyId: $('#searchChoiceClassify').val()
					}, showWebsiteView, 'json');
				}); 
			}
			
			function deleteWebsite(id) {
				$.post('pc0001/deleteWebsite',{
					id: id
				}, loadWebsiteData, 'json');
			}
			
			function addWebsite() {
				$('#editWebsite').removeClass('hidden');
				loadClassifyDataForOption($('#ChoiceClassify'));
				$('#urlId').removeAttr('tagId');
				$('#websiteName').val('');
				$('#websiteUrl').val('');
				$('#websiteDiscription').val('');
				$('#ChoiceClassify').val('');
			}
			
			function editWebsite(row) {
				$('#editWebsite').removeClass('hidden');
				loadClassifyDataForOption($('#ChoiceClassify')); 
				$('#urlId').attr('tagId', row.id);
				$('#websiteName').val(row.urlName);
				$('#websiteUrl').val(row.url);
				$('#websiteDiscription').val(row.introduce);
				$('#ChoiceClassify').val(row.classifyId);
			}
			
			function saveWebsite() {
				$('#editWebsite').addClass('hidden');
				var id = $('#urlId').attr('tagId');
				var urlName = $('#websiteName').val();
				var url = $('#websiteUrl').val();
				var introduce = $('#websiteDiscription').val();
				var classifyId = $('#ChoiceClassify').val();
				if(id) {
					$.post('pc0001/editWebsite',{
						id: id,
						urlName: urlName,
						url: url,
						introduce: introduce,
						classifyId: classifyId
					}, loadWebsiteData, 'json');
				}else{
					$.post('pc0001/addWebsite',{
						urlName: urlName,
						url: url,
						introduce: introduce,
						classifyId: classifyId
					}, loadWebsiteData, 'json');
				}
			}
			
			function showOption(result, container) {
				function genOption(row) {
					var html = [];
					
					html.push('		<option value="'+ row.id +'">'+ (row.classifyName || '未设置') +' </option>');
					
					var div = $(html.join('\r\n'));
					
					return div;
				}				
				while (container.selector == '#ChoiceClassify') {
					container.empty();
					break;
				}
				
				for(var i=0; i<result.length; i++) {
					var pDiv = genOption(result[i]);
 					container.append(pDiv); 
				}
				var clearDiv = $('<div class="clear"></div>');
 				container.append(clearDiv); 
			}
		});			
		</script>
	</body>
</html>